<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="重命名分类"
      class="tl size_13"
      width="800px"
      :visible.sync="edit_show"
    >
      <el-form ref="form" label-width="120px">
        <el-form-item label="分类名称：">
          <el-col :span="12">
            <el-input
              type="text"
              :rows="6"
              clearable
              placeholder="请输入分类名称"
              v-model="edit_form.title"
              autocomplete="off"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button :loading="$store.state.isLoading" type="primary" @click="edit_save()">编 辑</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="添加分类"
      class="tl size_13"
      width="800px"
      :visible.sync="add_show"
    >
      <el-form ref="form" label-width="120px">
        <el-form-item label="分类名称：">
          <el-col :span="12">
            <el-input
              type="text"
              :rows="6"
              clearable
              placeholder="请输入分类名称"
              v-model="add_form.title"
              autocomplete="off"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button :loading="$store.state.isLoading" type="primary" @click="add_save()">添 加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <tableComponents
      :isHavePagination="false"
      :isShow="false"
      :isHaveExport="false"
      @toAdd="add_show = true"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="cate_list.data"
          v-loading="loading"
          stripe
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.8%"
        >
          <el-table-column label="分类名称" min-width="100">
            <template slot-scope="scope">
              <div>
                <span>{{scope.row.title}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="分类下图片数量" min-width="190">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>{{scope.row.number}}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="80">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="edit_list_detail(scope.row.id)">编辑</el-button>
              <el-button type="danger" size="mini" @click="del_list_detail(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";

export default {
  name: "piccate",
  data() {
    return {
      add_form: {
        title: ""
      },
      add_show: false,
      edit_show: false,
      edit_form: {
        id: "",
        title: ""
      },
      loading: false,
      cate_list: {},
      currentPage: 1, //初始页
      pagesize: 10 //    每页的数据
    };
  },
  components: {
    HeadTitle
  },
  created() {
    this.get_cate_list(1);
  },
  methods: {
    add_save() {
      var param = {};
      param.title = this.add_form.title;
      this.$api.getPage.pic_add_cate(param).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("添加成功");
          this.add_show = false;
          this.get_cate_list();
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    edit_save() {
      var param = {};
      param.id = this.edit_form.id;
      param.title = this.edit_form.title;
      this.$api.getPage.pic_rename_cate(param).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("编辑成功");
          this.edit_show = false;
          this.get_cate_list();
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    edit_list_detail(id) {
      this.edit_form = {
        id: "",
        title: ""
      };
      this.edit_form.id = id;
      this.edit_show = true;
    },
    del_list_detail(item) {
      this.$swal({
        title: "您确定要删除该分类吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { id: item.id };
          this.$api.getPage.pic_del_cate(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这些信息。", "success");
              this.get_cate_list();
            } else {
              this.$swal("删除失败！", res.data.result, "error");
              this.get_cate_list();
            }
          });
        }
      });
    },

    get_cate_list(page) {
      this.loading = true;
      this.$api.getPage
        .pic_get_cate({ page: page, page_size: this.pagesize })
        .then(res => {
          if (res.data.code == 200) {
            this.cate_list = res.data.result;
            this.loading = false;
          } else {
            this.$fnc.alerterror(res.data.result);
            this.loading = false;
          }
        });
    }
  }
};
</script>
<style  scoped>
</style>
